<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>datePicker</title>
    <link rel="stylesheet" href="./datePicker.css">
</head>

<body>
    <div class="ui-datepicker-wapper">
        <div class="ui-datepicker-wapper-header">
            <div class="ui-datepicker-prev-btn">&lt;</div>
            <div class="ui-datepicker-next-btn">&gt;</div>
            <span class="ui-datepicker-current-month">2018-10</span>
        </div>
        <div class="ui-datepicker-wapper-body">
            <div class="table">
                <div class="thead">
                    <div class="td">一</div>
                    <div class="td">二</div>
                    <div class="td">三</div>
                    <div class="td">四</div>
                    <div class="td">五</div>
                    <div class="td">六</div>
                    <div class="td">日</div>
                </div>
                <div class="tbody">

                </div>
            </div>
        </div>
        
      
    </div>


</body>
<script src="../responsive/responsive.js"></script>
<script>
    class DatePicker {
        constructor(year, month) {
            if (!year && !month) {
                //初始化日期
                let today = new Date();
                this.year = today.getFullYear();
                this.month = today.getMonth() + 1;
            } else {
                this.year = year;
                this.month = month;
            }
        }
        getNextMonth() {
            this.month++;
            if (this.month == 13) {
                this.year++;
                this.month = 1;
            }
            console.log(this.month)
        }
        getPrevMonth() {
            this.month--;
            if (this.month == 0) {
                this.year--;
                this.month = 12;
            }
        }
        getYearDate() {
            return `${this.year}-${this.month < 10 ? '0' + this.month : this.month}`
        }
        getMonthDay() {
            // if (!year && !month) {
            //     let today = new Date();
            //     year = today.getFullYear();
            //     month = today.getMonth() + 1;
            // }
            let result = [];
            // 计算该月第一天以及最后一天为周几
            let currentFirstDayWeek = new Date(this.year, this.month - 1, 1).getDay();
            let currentFirstDay = new Date(this.year, this.month - 1, 1).getDate();
            if (currentFirstDayWeek === 0) {
                currentFirstDayWeek = 7
            }
            let currentLastDayWeek = new Date(this.year, this.month, 0).getDay();
            let currentLastDay = new Date(this.year, this.month, 0).getDate();
            if (currentLastDayWeek === 0) {
                currentLastDayWeek = 7
            }
            // 计算上一个月最后一天为几号
            let lastMonth = new Date(this.year, this.month - 1, 0);
            let lastMonthDay = lastMonth.getDate();
            // 计算上一个月在该月显示几天
            // console.log(currentFirstDayWeek)


            let lastMonthCount = currentFirstDayWeek - 1;
            // 下一月在本月显示几天
            let nextFirstDayWeek = new Date(this.year, this.month, 1).getDay();
            if (nextFirstDayWeek == 0) {
                nextFirstDayWeek = 7
            }
            let nextDayCount = 7 - nextFirstDayWeek + 1;
            if (nextDayCount === 7) {
                nextDayCount = 0;
            }
            for (let i = 0; i < 7 * 6; i++) {
                let day = i + 1 - lastMonthCount;
                let showDate = day;
                let thisMonth = this.month;
                let isCurrentMonth = true;
                if (day <= 0) {
                    showDate = lastMonthDay + day;
                    thisMonth = thisMonth - 1;
                    isCurrentMonth = false;
                } else if (day > currentLastDay) {
                    showDate = day - currentLastDay;
                    thisMonth = thisMonth + 1;
                    isCurrentMonth = false;
                }
                if (thisMonth == 0) {
                    thisMonth = 12
                } else if (thisMonth == 13) {
                    thisMonth = 1
                }
                if (day <= nextDayCount + currentLastDay) {
                    result.push({
                        day,
                        thisMonth,
                        showDate,
                        isCurrentMonth
                    })
                }

            }
            return result;
        }
        renderHtml() {
            let result = this.getMonthDay();
            let html = ''
            for (let i = 0; i < result.length; i++) {

                if (result[i].isCurrentMonth) {
                    if (i % 7 == 0) {
                        html = `${html}<div class="tr">
                            <div class="td"><div>${result[i].showDate}</div></div>`
                    } else if (i % 7 == 6) {
                        html = `${html}<div class="td"><div>${result[i].showDate}</div></div>
                        </div>`
                    } else {
                        html = `${html}<div class="td"><div>${result[i].showDate}</div></div>`
                    }
                } else {
                    if (i % 7 == 0) {
                        html = `${html}<div class="tr">
                            <div class="td not-current"><div>${result[i].showDate}</div></div>`
                    } else if (i % 7 == 6) {
                        html = `${html}<div class="td not-current"><div>${result[i].showDate}</div></div>
                        </div>`
                    } else {
                        html = `${html}<div class="td not-current"><div>${result[i].showDate}</div></div>`
                    }
                }

            }
            let tbody = document.getElementsByClassName('tbody')[0];
            let showYear = document.getElementsByClassName('ui-datepicker-current-month')[0];
            tbody.innerHTML = html;
            showYear.innerHTML = this.getYearDate();
        }

    }
    let datePicker = new DatePicker();
    datePicker.renderHtml()
    let nextBtn = document.getElementsByClassName('ui-datepicker-next-btn')[0],
        prevBtn = document.getElementsByClassName('ui-datepicker-prev-btn')[0];
    nextBtn.onclick = function () {
        datePicker.getNextMonth();
        datePicker.renderHtml()
    }
    prevBtn.onclick = function () {
        datePicker.getPrevMonth();
        datePicker.renderHtml()
    }
    class Note {
        constructor(dayEvent) {
            this.dayEvent = ['']
           this.res = new Responsive();
        }
        preview(value,cla){
            this.dayEvent[this.dayEvent.length-1]=value;
            let dayEvent = this.dayEvent;
            let note = this.getEleByCla(cla);
            this.res.render(dayEvent,()=>{
                let html = '';
                dayEvent.forEach((item,index)=>{
                    html += '<p><span>'+(index+1)+'.'+item+'</span></p>'
            });
            note.innerHTML = html
            })
        }
        add(value,cla){
            this.dayEvent.push('')
            let dayEvent = this.dayEvent;
            console.log(dayEvent)
            let note = this.getEleByCla(cla);
            this.res.render(dayEvent,()=>{
               let dom = document.createElement('p');
                 dom.innerHTML = '<span>'+this.dayEvent.length+'.'+this.dayEvent[this.dayEvent.length-1]+'</span>'
                note.appendChild(dom) 
            })
        }
        getEleById(id){
            return document.getElementById(id)
        }
        getEleByCla(cla){
            return  document.getElementsByClassName(cla)[0];
        }
        show(array){
            this.dayEvent = array;
            let dayEvent = this.dayEvent;
            console.log(dayEvent)
            let note = this.getEleByCla('ui-show-note');
            this.res.render(dayEvent,()=>{
                console.log(array)
               let dom ='';
               for(let i=0; i<array.length;i++){
                dom += '<p><span>'+(i+1)+'.'+array[i]+'</span></p>';
               }
               note.innerHTML = dom
            })
        }
        hide(cla){
            for(let i = 0; i< document.getElementsByClassName('ui-note').length;i++){
                document.getElementsByClassName('ui-note')[i].classList.add('hide-note');
            }
           
        }
        render(cla){
            let dom = document.createElement('div');
            dom.classList.add('ui-note')
            dom.innerHTML = `
            <div class="operation">
                <input type="text" id="input" value="">
                <div id="submit" class="submit">添加</div>
            </div>
            <div class="ui-show-note">
            </div>
            `
            this.getEleByCla(cla).appendChild(dom)
        }
    }
    let node = new Note();
    node.render('ui-datepicker-wapper');
    document.oninput = (event) =>{
        if(event.target.id == 'input'){
            node.preview(node.getEleById('input').value,'ui-show-note')
        }
    }
    document.onclick = (event) =>{
        if(event.target.id == 'submit'){
            node.add(node.getEleById('input').value,'ui-show-note');
            node.getEleById('input').value = '';
        }
    }
    node.getEleByCla('tbody').onclick = (event)=>{
        if(!event.target.dayEvent){
            event.target.dayEvent = ['']
        }
        let date = node.getEleByCla('ui-datepicker-current-month').innerHTML + '-' + event.target.innerHTML;
        eventObject = {
            date: event.target.dayEvent
        }
        console.log(event.target.dayEvent)
        node.show(event.target.dayEvent)
        // localStorage.setItem('dayEvent',eventObject)
    }
</script>

</html>